<template>
  <div id="china_map_box">
    <div id="china_map"></div>
  </div>
</template>

<script>
import * as echarts from 'echarts'
import '@/assets/map/china.js'
export default {
  data() {
    return {
      //echart 配制option
      options: {
        tooltip: {
          triggerOn: 'mousemove', //mousemove、click
          padding: 8,
          borderWidth: 1,
          borderColor: '#409eff',
          backgroundColor: 'rgba(255,255,255,0.7)',
          textStyle: {
            color: '#000000',
            fontSize: 13
          },
          formatter: function(e, t, n) {
            let data = e.data
            let context = `
                    <div>
                        <p><b style="font-size:15px;">${data.name}</b></p>
                        <p class="tooltip_style"><span class="tooltip_left">CPI:</span><span class="tooltip_right">${data.value}</span></p>
                    </div>
                    `
            return context
          }
        },
        visualMap: {
          show: true,
          left: 26,
          bottom: 45,
          showLabel: true,
          textStyle: {
            color: '#ffffff',
            fontSize: 13
          },
          pieces: [
            {
              gte: 110,
              label: '> 110',
              color: '#755fff'
            },
            {
              gte: 108,
              lt: 110,
              label: '108 - 110',
              color: '#7279ff'
            },
            {
              gte: 106,
              lt: 108,
              label: '106 - 108',
              color: '#7094ff'
            },
            {
              gte: 104,
              lt: 106,
              label: '104 - 106',
              color: '#6dafff'
            },
            {
              gte: 102,
              lt: 104,
              label: '102 - 104',
              color: '#6bcaff'
            },
            {
              gte: 100,
              lt: 102,
              label: '100 - 102',
              color: '#68e4ff'
            },
            {
              lt: 100,
              label: '< 100',
              color: '#66ffff'
            }
          ]
        },
        geo: {
          map: 'china',
          scaleLimit: {
            min: 1,
            max: 2
          },
          zoom: 1,
          top: 120,
          label: {
            normal: {
              show: true,
              fontSize: '14',
              color: 'rgba(0,0,0,0.7)'
            }
          },
          itemStyle: {
            normal: {
              borderColor: 'rgba(0, 0, 0, 0.2)'
            },
            emphasis: {
              areaColor: '#f2d5ad',
              shadowOffsetX: 0,
              shadowOffsetY: 0,
              borderWidth: 0
            }
          }
        },
        series: [
          {
            name: '突发事件',
            type: 'map',
            geoIndex: 0,
            data: []
          }
        ]
      },
      //echart data
      dataList: [
        { name: '北京', value: 109.93 },
        { name: '天津', value: 107.84 },
        { name: '河北', value: 104.97 },
        { name: '山西', value: 105.35 },
        { name: '内蒙古', value: 106.17 },
        { name: '辽宁', value: 108.7 },
        { name: '吉林', value: 104.93 },
        { name: '黑龙江', value: 105.74 },
        { name: '上海', value: 105.15 },
        { name: '江苏', value: 109.19 },
        { name: '浙江', value: 107.23 },
        { name: '安徽', value: 108.49 },
        { name: '福建', value: 108.08 },
        { name: '江西', value: 109.22 },
        { name: '山东', value: 109.56 },
        { name: '河南', value: 109.91 },
        { name: '湖北', value: 108.1 },
        { name: '湖南', value: 105.81 },
        { name: '广东', value: 106.18 },
        { name: '广西', value: 108.93 },
        { name: '海南', value: 105.42 },
        { name: '重庆', value: 108.58 },
        { name: '四川', value: 108.15 },
        { name: '贵州', value: 107.77 },
        { name: '云南', value: 107.77 },
        { name: '西藏', value: 108.76 },
        { name: '陕西', value: 107.77 },
        { name: '甘肃', value: 107.77 },
        { name: '青海', value: 107.65 },
        { name: '宁夏', value: 109.19 },
        { name: '新疆', value: 108.76 },
        { name: '台湾', value: 0 },
        { name: '香港', value: 0 },
        { name: '澳门', value: 0 }
      ]
    }
  },
  methods: {
    //初始化中国地图
    initEchartMap() {
      let mapDiv = document.getElementById('china_map')
      let myChart = echarts.init(mapDiv)
      myChart.setOption(this.options)
    },
    //修改echart配制
    setEchartOption() {
      this.options.series[0]['data'] = this.dataList
    }
  },
  created() {
    this.setEchartOption()
  },
  mounted() {
    this.$nextTick(() => {
      this.initEchartMap()
    })
  }
}
</script>

<style>
#china_map_box {
  width: 100%;
  height: 100%;
}
#china_map {
  width: 100%;
  height: 80vh;
  color: #ffffff;
}
</style>
